<div class="network-container" fxLayout="column" #network >
  <ul class="title">
    <li (click)="showMask(0)">集控拓扑</li>
    <li (click)="showMask(1)">主站拓扑</li>
    <li (click)="showMask(2)">子站拓扑</li>
  </ul>
  <!-- <div class="echarts" style="height: 100%;" echarts [options]="option" (chartInit)="onChartInit($event)"></div> -->
  <section class="server-part" fxLayout="row" (resize)="onResizebigimg()" (click)="closeMask()">
    <dl *ngFor="let item of servers" >
      <dd class="text">{{item?.networkName}}</dd>
      <dt><img [src]="'./assets/images/'+item?.icon" alt=""></dt>
      <dd *ngFor='let d of item?.device' [ngClass]='{"line-long":d?.reticle===2,"line-short":d?.reticle===1,green:d?.tagData?.value==1,red:d?.tagData?.value==0}'>

      </dd>
     <!--  <dd class="line-long" [ngClass]="{red:item?.tagData?.value==0,green:item?.tagData?.value==1}"></dd>
      <dd class="line-short" [ngClass]="{red:item?.tagData?.value==0,green:item?.tagData?.value==1}"></dd>     -->
    </dl>
    <!-- <dl>
      <dd>关系库服务器</dd>
      <dt><img src="./assets/images/server.png" alt=""></dt>
      <dd class="line-long"></dd>
      <dd class="line-short"></dd>    
    </dl> -->
  </section>
  <section class="main-part" #mainPart  
  [ngClass]='{topRed:interchanger[0]?.device[0]?.tagData?.value==0,topGreen:interchanger[0]?.device[0]?.tagData?.value==1,bottomRed:interchanger[1]?.device[0]?.tagData?.value==0,bottomGreen:interchanger[1]?.device[0]?.tagData?.value==1}'
   (click)="closeMask()">
    <dl *ngFor='let item of interchanger'>
      <dt><img [src]="'./assets/images/'+item?.icon" alt=""></dt>
      <dd>{{item?.networkName}}</dd>
    </dl>
    <!-- <dl>
      <dt><img src="./assets/images/interchanger.png" alt=""></dt>
      <dd>交换机2</dd>
    </dl> -->
  </section>
  <section class="workstation-part" fxLayout="row"  (click)="closeMask()">
    <dl *ngFor="let item of workstations">
      
      <dt><img [src]="'./assets/images/'+item?.icon" alt=""></dt>
      <dd class="text">{{item?.networkName}}</dd>
      <dd *ngFor='let d of item?.device' [ngClass]='{"workstation-short":d?.reticle===2,"workstation-long":d?.reticle===1,green:d?.tagData?.value==1,red:d?.tagData?.value==0}'>

      <!-- <dd class="workstation-long" [ngClass]="{red:item?.tagData?.value==0,green:item?.tagData?.value==1}"></dd>
      <dd class="workstation-short" [ngClass]="{red:item?.tagData?.value==0,green:item?.tagData?.value==1}"></dd>  -->
    </dl>
  </section>
  <!--遮罩层-->
  <section class="mask" [hidden]="!isShowMask">
    <a class="dropdown-close" (click)="closeMask()">×</a>
    <img [src]='imgSrc' id="chgImg" 
    (mousewheel)="rollImg($event)">
  </section>

</div>
